<template>
  <div class="steve-dialog-ace">
    <t-dialog
      v-model:visible="visibleDialog"
      :header="false"
      width="80%"
      placement="center"
      :close-on-overlay-click="false"
      :close-btn="false"
      @confirm="onConfirm"
    >
      <div class="steve-dialog-ace__editor">
        <steve-ace-editor v-model:value="aceValue" :height="getAceHeight" lang="javascript" />
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, toRefs, watch } from 'vue';

import SteveAceEditor from '@/components/steveAceEditor/index.vue';

const props = defineProps({
  // 是否可见
  visible: {
    type: Boolean,
    default: false,
  },
  value: {
    type: String,
    default: '',
  },
});
const { visible, value } = toRefs(props);

// 事件
const emit = defineEmits(['update:visible', 'confirm']);

const visibleDialog = ref(false);
watch(visible, (v) => {
  visibleDialog.value = v;
});

// 通知 visible
watch(visibleDialog, (v) => {
  emit('update:visible', v);
});

// ace的高度
const getAceHeight = computed(() => {
  return window.innerHeight / 1.5;
});

// ace的值
const aceValue = ref('');
watch(value, (v) => {
  aceValue.value = v;
});

// 确认事件
const onConfirm = () => {
  console.log(aceValue.value);
  emit('confirm', aceValue.value);
};
</script>

<style lang="less" scoped>
.steve-dialog-ace {
  :deep(.t-dialog) {
    &__body {
      padding: 0 !important;
    }

    &--default {
      padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingTB-l);
    }
  }

  &__editor {
    border-radius: var(--td-radius-medium);
    overflow: hidden;
  }
}
</style>
